import React, {useState} from 'react'
import {View, Text, Image} from '@tarojs/components'
import GridLayer, {GridLayerItem} from '@/components/GridLayer/GridLayer'
import myFill from '@/assets/icon/my-fill.png'
import numImg from '@/assets/icon/num.png'
import informationImg from '@/assets/icon/infomation.png'
import Taro, {useReady} from '@tarojs/taro'
import {getChatList} from '@/services/information'
import {dealEmoji} from '@/uitls/uitl'
import {useMaintain} from '@/hooks'
import './Information.scss'

const icons: GridLayerItem[] = [
  {
    iconfont: myFill,
    desc: '喜欢 | 收藏',
    url: ''
  },
  {
    iconfont: numImg,
    desc: '新增粉丝',
    url: ''
  },
  {
    iconfont: informationImg,
    desc: '消息 | @',
    url: ''
  },
]

interface ChatListItem {
  avatar: string
  id: string
  content: string
  unreadCount: number
  nickname: string
}

const Information: React.FC = () => {

  const [chatList, setChatList] = useState<ChatListItem[]>([])

  const {onMaintain} = useMaintain()

  useReady(() => {
    getChatList().then((ret: ChatListItem[]) => {
      for (const chatListItem of ret) {
        chatListItem.content = dealEmoji(chatListItem.content)
      }
      setChatList(ret)
    })
  })

  function selectUser (id: string, nickname) {
    Taro.navigateTo({
      url: `/packageC/pages/ChatRoom/ChatRoom?id=${id}&nickname=${nickname}`
    })
  }

  return <View className='container'>
    <View className='title_wrap'>
      <Text className='title_wrap_info'>消息</Text>
      {/*<Text className='title_wrap_text'>创建聊天</Text>*/}
    </View>
    <View className='information_grid'>
      <GridLayer grids={icons} onclick={onMaintain} />
    </View>
    <View className='chat_list'>
      {
        chatList.map(list => <View className='chat_list_item' key={list.id} onClick={() => selectUser(list.id, list.nickname)}>
          <Image className='chat_list_item_avatar' src={list.avatar} />
          <View className='chat_list_box'>
            <Text className='box_nickname'>{list.nickname || '空'}</Text>
            <Text className='box_content' dangerouslySetInnerHTML={{__html: list.content}} />
          </View>
          {list.unreadCount > 0 ? <View className='information_item_sign'>{list.unreadCount}</View> : <></>}
        </View>)
      }
    </View>
  </View>
}

export default Information
